<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/fat.css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.7/dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/fat.js"></script>
    <title>Fat</title>
</head>

<body>
    <div class="one">
        <button class="btn btn-large btn-ca"><a href="#">Default Button</a></button>
        <button class="btn btn-large btn-cb"><a href="#">Primary Button</a></button>
        <button class="btn btn-large btn-cc"><a href="#">Info Button</a></button>
        <button class="btn btn-large btn-cd"><a href="#">Danger Button</a></button>
        <button class="btn btn-large btn-ce"><a href="#">Success Button</a></button>
        <button class="btn btn-large btn-cf"><a href="#">Warning Button</a></button>
        <button class="btn btn-large btn-cg"><a href="#">Inverse Button</a></button>
        <button class="btn btn-large btn-ch"><a href="#">Disable Button</a></button>
    </div>
    <div class="two">
        <div class="navbar navbar-inverse">
            <div class="navbar-inner">
                <div class="container">
                    <div class="nav-collapse ">
                        <ul class="nav">
                            <li><a href="#">Menu Item</a></li>
                            <li class="active"><a href="#">Messages
                            <span class="navbar-unread">1</span></a>
                                <ul class="nav-collapses">
                                    <li>Element One</li>
                                    <li>Sub menu</li>
                                    <li>Element three</li>
                                </ul>
                            </li>
                            <li><a href="#">About Us</a></li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <div class="dropdown">
            <button class="btn dropdown-toggle" data-toggle="dropdown"><a href="#">X-Men</a><div class="span-box"><span class="caret"></span></div></button>
            <ul class="dropdown-menu">
                <li>
                    Choose hero
                </li>
                <li>
                    Spider Man
                </li>
                <li>
                    Wolverine
                </li>
                <li>
                    Captain America
                </li>
                <li class="active">
                    X-Men
                </li>
                <li>
                    Crocoile
                </li>
            </ul>
        </div>
    </div>
    <div class="three">
        <input type="text" value="Inactive" class="form-control fc1">
        <input type="text" value="Error" class="form-control fc2">
        <input type="text" value="Success" class="form-control fc3">
        <input type="text" value="Disable" class="form-control fc4">
    </div>
    <div class="four">
        <div class="progress">
            <div class="progress-bar" style="width: 45%;"></div>
        </div>
        <div class="progress">
            <div class="progress-bar" style="width: 40%;"></div>
            <div class="progress-bar bar-warning" style="width: 10%;"></div>
            <div class="progress-bar bar-danger" style="width: 10%;"></div>
            <div class="progress-bar bar-success" style="width: 10%;"></div>
            <div class="progress-bar bar-info" style="width: 10%;"></div>
        </div>
        <div class="progress">
            <div class="progress-bar" style="width: 45%;"></div>
            <a class="ball" href="#" style="left:25%"></a>
        </div>
    </div>
</body>

</html>